---
title: WordPress Headless & Astro
description: Ajoutez du contenu à votre projet Astro en utilisant WordPress comme CMS
sidebar:
  label: WordPress
type: cms
stub: false
logo: wordpress
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'
import { LinkCard, CardGrid } from '@astrojs/starlight/components';

[WordPress](https://wordpress.org/) est un système de gestion de contenu qui comprend son propre frontend, mais qui peut également être utilisé comme un CMS headless pour fournir du contenu à votre projet Astro.

## Intégration avec Astro

WordPress est livré avec une [API REST WordPress](https://developer.wordpress.org/rest-api/) intégrée pour connecter vos données WordPress à Astro. Vous pouvez éventuellement installer [WPGraphQL](https://wordpress.org/plugins/wp-graphql/) ou [Gato GraphQL](https://wordpress.org/plugins/gatographql/) sur votre site pour utiliser GraphQL.

### Prérequis

Pour commencer, vous devez disposer des éléments suivants :

1. **Un projet Astro** - Si vous n'avez pas encore de projet Astro, notre [guide d'installation](/fr/install-and-setup/) vous permettra d'être opérationnel en un rien de temps.
2. **Un site WordPress** - L'API REST de votre site est `[VOTRE_SITE]/wp-json/wp/v2/` et est disponible par défaut avec tout site WordPress. Il est également possible de [configurer WordPress dans un environnement local](https://wordpress.org/support/article/installing-wordpress-on-your-own-computer/).

### Mise en place des informations d'identification

Par défaut, votre API WordPress REST est disponible pour des requêtes externes afin de récupérer des données sans authentification. Cela ne permet pas aux utilisateurs de modifier vos données ou les paramètres de votre site et vous permet d'utiliser vos données dans votre projet Astro sans aucune authentification.

Vous pouvez choisir de [demander une authentification](https://developer.wordpress.org/rest-api/frequently-asked-questions/#require-authentication-for-all-requests) si nécessaire.

### Récupération de données

Récupérez vos données WordPress via l'URL unique de l'API REST de votre site et la route de votre contenu (pour un blog, il s'agira généralement de `posts`). Ensuite, vous pouvez restituer les propriétés de vos données en utilisant la directive `set:html={}` d'Astro.

Par exemple, pour afficher une liste de titres d'articles et leur contenu :

```astro title="src/pages/index.astro"
---
const res = await fetch("https://[VOTRE-SITE]/wp-json/wp/v2/posts");
const posts = await res.json();
---
<h1>Astro + WordPress 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title.rendered} />
      <p set:html={post.content.rendered} />
  ))
}
```

L'API REST de WordPress inclut des [paramètres globaux](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/) tels que `_fields` et `embed`.

Une grande quantité de données est disponible via cette API, vous pouvez donc souhaiter ne récupérer que certains champs. Vous pouvez restreindre votre réponse en ajoutant le paramètre [`_fields`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_fields) à l'URL de l'API, par exemple : `[VOTRE-SITE]/wp/v2/posts?_fields=author,id,excerpt,title,link`

L'API peut également renvoyer du contenu lié à votre article, tel qu'un lien vers l'article parent ou vers les commentaires sur l'article. Vous pouvez ajouter le paramètre [`_embed`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_embed) à l'URL de l'API (par exemple, `[VOTRE-SITE]/wp/v2/posts?_embed`) pour indiquer au serveur que la réponse doit inclure ces ressources intégrées.

## Créer un blog avec WordPress et Astro

Cet exemple récupère des données de l'API WordPress publique de [https://norian.studio/dinosaurs/](https://norian.studio/dinosaurs/). Ce site WordPress rassemble des informations sur des dinosaures individuels sous la route `dinos`, de la même manière qu'un blog rassemblerait des articles individuels sous la route `posts`.

Cet exemple montre comment reproduire cette structure de site dans Astro : une page d'index qui répertorie les dinosaures avec des liens vers des pages individuelles de dinosaures générées dynamiquement.

:::note
Pour utiliser les [Custom Post Types (CPT)](https://learn.wordpress.org/lesson-plan/custom-post-types/) dans votre API WordPress (pas seulement `post` et `page`), vous devrez [les configurer dans votre tableau de bord WordPress](https://stackoverflow.com/questions/48536646/how-can-i-get-data-from-custom-post-type-using-wp-rest-api) ou [ajouter la prise en charge de l'API REST pour les types de contenu personnalisés](https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-rest-api-support-for-custom-content-types/) dans WordPress.

Cet exemple récupère les données d'un site WordPress dont les types de contenu ont déjà été configurés et exposés à l'API REST.
:::

### Affichage d'une liste d'articles WordPress

La page `src/pages/index.astro` répertorie chaque dinosaure, avec une description et un lien vers sa propre page.

<FileTree title="Structure de Projet">
- src/
  - pages/
    - **index.astro**
    - dinos/
      - [slug].astro
- astro.config.mjs
- package.json
</FileTree>

La récupération via l'API renvoie un objet qui comprend les propriétés suivantes :

- `title.rendered` - Contient le rendu HTML du titre de l'article.
- `content.rendered` - Contient le rendu HTML du contenu de l'article.
- `slug` - Contient le nom de l'article. (Il s'agit du lien vers les pages individuelles de dinosaures générées dynamiquement).

```astro title="/src/pages/index.astro"
---
import Layout from "../layouts/Layout.astro";

let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
let posts = await res.json();
---
<Layout title="Dinos!">
  <section>
    <h1>Liste des Dinosaures</h1>
    {
      posts.map((post) => (
        <article>
          <h2>
            <a href={`/dinos/${post.slug}/`} set:html={post.title.rendered} />
          </h2>
          <Fragment set:html={post.content.rendered} />
        </article>
      ))
    }
  </section>
</Layout>
```

### Utiliser l'API de WordPress pour générer des pages

La page `src/pages/dinos/[slug].astro` [génère dynamiquement une page](/fr/guides/routing/#routes-dynamiques) pour chaque dinosaure.

```astro title="/src/pages/dinos/[slug].astro"
---
import Layout from '../../layouts/Layout.astro';

const { slug } = Astro.params;

let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`);
let [post] = await res.json();

// La fonction getStaticPaths() est nécessaire pour les sites Astro statiques.
// Si vous utilisez SSR, vous n'aurez pas besoin de cette fonction.
export async function getStaticPaths() {
  let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
  let posts = await data.json();

  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post: post },
  }));
}
---
<Layout title={post.title.rendered}>
  <article>
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>
```

### Renvoyer les ressources intégrées

Le paramètre de requête `_embed` demande au serveur de renvoyer des ressources connexes (intégrées).

```astro title="src/pages/dinos/[slug].astro" /&_embed/
---
const { slug } = Astro.params;

let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`);
let [post] = await res.json();
---
```

La propriété `_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url` est renvoyée, et peut être utilisée pour afficher l'image vedette sur chaque page de dinosaures. (Remplacez `medium` par la taille d'image souhaitée).

```astro title="/src/pages/dinos/[slug].astro" {3}
<Layout title={post.title.rendered}>
  <article>
    <img src={post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url} />
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>
```

### Publier votre site web

Pour déployer votre site web, consultez nos [guides de déploiement](/fr/guides/deploy/) et suivez les instructions de votre hébergeur préféré.

## Ressources communautaires

- [Construire un site Astro avec WordPress comme CMS headless](https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/) (Anglais) par Chris Bongers.
- [Construire avec Astro x WordPress](https://www.youtube.com/watch?v=Jstqgklvfnc) (Anglais) sur le flux de Ben Holmes.
- [Construire un site WordPress headless avec Astro](https://developers.wpengine.com/blog/building-a-headless-wordpress-site-with-astro) (Anglais) par Jeff Everhart.
- [Astro et WordPress en tant qu'API](https://darko.io/posts/wp-as-an-api/) (Anglais) par Darko Bozhinovski.

## Sites web en production

Les sites suivants utilisent Astro + WordPress en production :

- [Dinos !](https://wc-dinos.netlify.app/) par Anindo Neel Dutta - [code source sur GitHub](https://github.com/leen-neel/astro-wordpress)

## Thèmes

<Grid>
  <Card title="Astro WordPress Starter" href="https://astro.build/themes/details/astro-wordpress-starter/" thumbnail="astro-wordpress-starter.png"/>
</Grid>

## Ressources communautaires

<CardGrid>

  <LinkCard href="https://dev.to/bngmnn/leveraging-wordpress-as-a-headless-cms-for-your-astro-website-a-comprehensive-guide-a4d" title="Introduction à Astro + WordPress (Anglais)"/>
  <LinkCard title="Astro + WPGraphQL pour des sites WordPress plus sécurisés (Anglais)" href="https://www.youtube.com/watch?v=fWxn-r83ygQ" />
  <LinkCard title="Réduire les temps de compilation de WordPress en mode headless grâce à l'API couche de contenu d'Astro (Anglais)" href="https://andrewkepson.com/blog/headless-wordpress/build-time-astro-content-layer-api/"/>
  <LinkCard title="Comment configurer un site WordPress headless avec Astro (Anglais)" href="https://dev.to/mathiasahlgren/how-to-set-up-a-headless-wordpress-site-with-astro-3a2h" />
  <LinkCard title="Créer un site statique avec WordPress et Astro (Anglais)" href="https://kinsta.com/blog/wordpress-astro/" />
  <LinkCard title="Passer à WordPress headless avec Astro (Anglais)" href="https://www.youtube.com/watch?v=MP2TR6Z_YTc" />
  <LinkCard title="Tirer parti de WordPress comme CMS headless pour votre site Web Astro : configuration de l'API et récupération de données (Anglais)" href="https://medium.com/@bangemann.dev/configure-wordpress-rest-api-setup-data-fetching-4af5161095f6" />
  <LinkCard title="WordPress headless avec Astro : Installation d'Astro et récupération d'articles avec WP-GraphQL (Anglais)" href="https://www.youtube.com/watch?v=2PSqABrME28" />
  <LinkCard title="Créer un site WordPress headless avec Astro (Anglais)" href="https://www.youtube.com/watch?v=54U7dVmhyxE" />
  <LinkCard title="Démo de démarrage de WordPress headless avec Astro par WPEngine (Anglais)" href="https://www.youtube.com/watch?v=BcoxZZIfESI" />
  <LinkCard title="WordPress headless avec Astro – Créez un blog simple à partir de zéro avec Tailwind CSS (Anglais)" href="https://fullstackdigital.io/blog/headless-wordpress-with-astro-build-a-simple-blog/" />
  <LinkCard title="Créer un site e-commerce avec WordPress Headless et Astro (Anglais)" href="https://shaxadd.medium.com/building-an-e-commerce-website-with-headless-wordpress-and-astro-2712d8c8b735" />
   <LinkCard title="Créer un site WordPress headless avec Astro (Anglais)" href="https://wpengine.com/builders/building-headless-wordpress-site-astro/" />
  <LinkCard title="Créer un site web Astro avec WordPress en tant que CMS headless (Anglais)" href="https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/" />
 

</CardGrid>

:::note[Vous avez une ressource à partager ?]
Si vous avez trouvé (ou créé !) une vidéo ou un article de blog utile sur l'utilisation de WordPress avec Astro, [ajoutez-le à cette liste](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/cms/wordpress.mdx) !
:::
